<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/ztree/jquery.ztree.all.js"></script>
		<script src="js/ztree/jquery.ztree.core.js"></script>
		<script src="js/ztree/jquery.ztree.excheck.js"></script>
		<script src="js/ztree/jquery.ztree.exedit.js"></script>
 		<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" />
				<link rel="stylesheet" href="css/zTreeStyle/demo.css" />

	 <SCRIPT type="text/javascript">
		 
		var setting = {
			
				edit : {
						enable : true,
						drag : {
							isMove : true,
							prev : true,
							autoOpenTime : 0
						},
						editNameSelectAll : true,
						showRemoveBtn : false,
						/* 	removeTitle: "删除节点", */
						/* renameTitle: "编辑节点名称",*/
						showRenameBtn : true,
						expandAll : true
					},
				data : {
					simpleData : {
						enable : true,
						idKey : "id",
						nameKey : "name"
					}

				},

				view : {
					dblClickExpand : false
				},
				check : {
					enable : true
				},
				callback : {
					onRightClick : OnRightClick,
					 onRename: onRename
				},
				async:{
					enable:true
				}
			};

		function onRename(event, treeId, treeNode, isCancel) {
	        if (isCancel) {
	            return;
	        }
	          zTree = $.fn.zTree.getZTreeObj("treeDemo");
	        var onodes = zTree.getNodes()
	        console.log(onodes);
	        //发送请求修改节点信息
	        var data = {
	            "id": treeNode.id,
	            "pid": treeNode.pId,  //父节点
	            "name": treeNode.name,
	        };
	       // alert(data.name+"---"+data.id+"----"+data.pid);
	          $.ajax({
	            type: 'post',
	            url: "ztree/add",
	            data: data,
	            timeout: 1000, //超时时间设置，单位毫秒
	            dataType: 'json',
	            success: function (res) {
	                 //   layer.msg(res.msg)
	                 alert(res.msg);
	                 //刷新节点
	              //   $('#treeDemo').datagrid('reload',{parentId:treeNode.pId});
	               //  var zTree = $.fn.zTree.getZTreeObj("#treeDemo");
	               //  refreshNode();
	               //如果是添加新节点，需要刷新整棵树
	               if(data.id==undefined){
	            	   initData();
	               }
	               
	            }
	        });  
	        
	        
	    }
		
		function refreshNode(){
			var zTree = $.fn.zTree.getZTreeObj("#treeDemo");
			type = "refresh";
			silent = false;
			 nodes = zTree.getSelectedNodes(); 
			 /*强行异步加载父节点的子节点。[setting.async.enable = true 时有效]*/  
			 zTree.reAsyncChildNodes(nodes[0], type, silent);  
			
		}
	 
			function OnRightClick(event, treeId, treeNode) {
				if (!treeNode && event.target.tagName.toLowerCase() != "button"
						&& $(event.target).parents("a").length == 0) {
					zTree.cancelSelectedNode();
					showRMenu("root", event.clientX, event.clientY);
				} else if (treeNode && !treeNode.noR) {
					zTree.selectNode(treeNode);
					showRMenu("node", event.clientX, event.clientY);
				}
			}

			function showRMenu(type, x, y) {
				$("#rMenu ul").show();
				if (type == "root") {
					$("#m_del").hide();
					$("#m_check").hide();
					$("#m_unCheck").hide();
				} else {
					$("#m_del").show();
					$("#m_check").show();
					$("#m_unCheck").show();
				}

				y += document.body.scrollTop;
				x += document.body.scrollLeft;
				rMenu.css({
					"top" : y + "px",
					"left" : x + "px",
					"visibility" : "visible"
				});

				$("body").bind("mousedown", onBodyMouseDown);
			}
			function hideRMenu() {
				if (rMenu)
					rMenu.css({
						"visibility" : "hidden"
					});
				$("body").unbind("mousedown", onBodyMouseDown);
			}
			function onBodyMouseDown(event) {
				if (!(event.target.id == "rMenu" || $(event.target).parents(
						"#rMenu").length > 0)) {
					rMenu.css({
						"visibility" : "hidden"
					});
				}
			}
			var addCount = 1;
			function addTreeNode() {
				hideRMenu();
				var newNode = {
					name : "增加" + (addCount++)
				};

				if (zTree.getSelectedNodes()[0]) {
					newNode.checked = zTree.getSelectedNodes()[0].checked;
					zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
				} else {
					zTree.addNodes(null, newNode);
				}

			}
			function removeTreeNode() {

				hideRMenu();
				// var zTree = $.fn.zTree.getZTreeObj("tree"),
				nodes = zTree.getSelectedNodes(), treeNode = nodes[0];

				if (treeNode.isParent) {
					alert("当前节点是父节点，不能删除");
					return;
				}
				if (nodes && nodes.length > 0) {

					var con = confirm("确认删除此" + nodes[0].name + "吗?");
					if (!con) {
						return;
					}

					$.ajax({
						url : 'ztree/delete?id=' + nodes[0].id,
						type : "get",
						dataType : "json",
						success : function(data) {
							if (data.status == 200) {
								alert("删除成功");
								zTree.removeNode(treeNode);
							}

						},
						error : function(xhr) {
							alert(xhr.status);
						}
					});

				}
			}
			/* 		function checkTreeNode(checked) {
			 var nodes = zTree.getSelectedNodes();
			 if (nodes && nodes.length>0) {
			 zTree.checkNode(nodes[0], checked, true);
			 }
			 hideRMenu();
			 }
			 function resetTree() {
			 hideRMenu();
			 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
			 } */

			var zTree, rMenu;
			$(document).ready(function() {
				/* 	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
				zTree = $.fn.zTree.getZTreeObj("treeDemo");
				rMenu = $("#rMenu");   */
				initData();
				
			});
			
			function initData(){
				$.ajax({
					url : 'ztree/getBaseInfo',
					type : "get",
					dataType : "json",
					success : function(data) {

						//树形菜单初始化
						//alert(data);
						var z = $.fn.zTree.init($("#treeDemo"), setting, data);
						z.expandAll(true);
						zTree = $.fn.zTree.getZTreeObj("treeDemo");

						rMenu = $("#rMenu");
					},
					error : function(xhr) {
						alert(xhr.status);
					}
				});
			}
		</SCRIPT>
	<style type="text/css">
		div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
		div#rMenu ul li{
			margin: 1px 0;
			padding: 0 5px;
			cursor: pointer;
			list-style: none outside none;
			background-color: #DFDFDF;
		}
	</style>
 </HEAD>

<BODY>
 
 
		<ul id="treeDemo" class="ztree" style="width:100%;height:700px"></ul>
 
<div id="rMenu">
	<ul>
		<li id="m_add" onclick="addTreeNode();">增加节点</li>
		<li id="m_del" onclick="removeTreeNode();">删除节点</li>
<!-- 		<li id="m_check" onclick="checkTreeNode(true);">Check节点</li>
		<li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li>
		<li id="m_reset" onclick="resetTree();">恢复zTree</li> -->
	</ul>
</div>
</BODY>
</HTML>